import MiniIconButtonVue from '@/components/common/MiniIconButton.vue'
import _ from 'lodash'
import { mock } from 'mockjs'
import { useDialog } from 'naive-ui'
import { TableColumns } from 'naive-ui/es/data-table/src/interface'
import { ref, h } from 'vue'
import { NSpace, NButton } from 'naive-ui'
import { useDiscMsg } from '@/hooks/common/useDiscMsg'
import { NTag } from 'naive-ui/lib/components'

const showOverlay = ref(false)

// 覆盖图
function handleOverlay() {
    showOverlay.value = true
}

interface Schedule {
    name: string
    date: string
    createDate: string
    range: number[]
    period: string
    imageNumber: number
}

const overlayColumns: TableColumns<Schedule> = [
    {
        title: '名称',
        key: 'name',
        width: 200,
    },
    {
        title: '日期',
        key: 'date',
        width: 200,
    },
    {
        title: '创建日期',
        key: 'createDate',
        width: 200,
    },
    {
        title: '范围',
        key: 'range',
        width: 200,
        render(row) {
            let range = row.range.join(',')

            return <>
                <NTag
                    size='tiny'
                    type='primary'
                    bordered={false} >
                    {range}
                </NTag>
            </>
        }
    },
    {
        title: '生成周期',
        key: 'period',
        width: 200,
    },
    {
        title: '影像数量',
        key: 'imageNumber',
        width: 200,
    },
    {
        title: '操作',
        key: 'operation',
        width: 200,
        render(row) {
            return <>
                <NSpace>
                    <MiniIconButtonVue
                        tooltip='编辑'
                        type='success'
                        onClick={() => handleEditSchedule(row)}>
                        <i class="fa fa-edit"></i>
                    </MiniIconButtonVue>
                    <MiniIconButtonVue
                        tooltip='查看'
                        type='info'
                        onClick={() => handleDeleteSchedule(row)}>
                        <i class="fa fa-search"></i>
                    </MiniIconButtonVue>
                    <MiniIconButtonVue
                        tooltip='删除'
                        type='error'
                        onClick={() => handleDeleteSchedule(row)}>
                        <i class="fa fa-trash"></i>
                    </MiniIconButtonVue>

                </NSpace>
            </>
        },
    }
]

const overlayData = ref([])

function generateOverlayData() {
    return mock({
        'array|10': [
            {
                'name|+1': [
                    '约翰内斯堡',
                    '黑海造船厂',
                    '釜山造船厂',
                    '釜山潜艇基地',
                    '横须贺基地',
                ],
                date: '@date',
                createDate: '@date',
                'period|1': ['1天', '1周', '1月'],
                range: function () {
                    let lat = _.floor(_.random(0, 100, true), 2)
                    let lng = _.floor(_.random(0, 100, true), 2)
                    return [lat, lng]
                },
                imageNumber: '@integer(1,100)',
            },
        ],
    }).array
}

const showSchedule = ref(false)

function handleOverlaySchedule() {
    showSchedule.value = true
}

const showEditSchedule = ref(false)

function handleEditSchedule(row) {

}

const {
    dialog
} = useDiscMsg()

function handleDeleteSchedule(row: Schedule) {
    debugger
    dialog.error({
        title: '提示',
        content: '确定删除该计划么',
        negativeText: '取消',
        positiveText: '确定',
        onPositiveClick() {
            return true
        }
    })
}



const overviewList = ref([
    {
        name: '约翰内斯堡',
        date: '2020-01-01',
    },
    {
        name: '朝鲜',
        date: '2020-01-01',
    },
    {
        name: '釜山造船厂',
        date: '2020-01-01',
    },
    {
        name: '东京',
        date: '2020-01-01',
    },
    {
        name: '名古屋',
        date: '2020-01-01',
    },
    {
        name: '横滨',
        date: '2020-01-01',
    },
    {
        name: '横须贺',
        date: '2020-01-01',
    },
    {
        name: '珍珠港',
        date: '2020-01-01',
    },
    {
        name: '夏威夷',
        date: '2020-01-01',
    },
    {
        name: '匹兹堡',
        date: '2020-01-01',
    },
    {
        name: '渥太华',
        date: '2020-01-01',
    },
    {
        name: '曼谷',
        date: '2020-01-01',
    },
])

overlayData.value = generateOverlayData()


const showOverlayPreview = ref(false)

function handleOverlayPreview() {
    showOverlayPreview.value = true
}

const showOverlayEdit = ref(false)

function handleOverlayEdit() {
    showOverlayEdit.value = true
}

function handleOverlayDelete() {
    dialog.error({
        title: '提示',
        content: '确定删除该覆盖图么?',
        negativeText: '取消',
        positiveText: '确定',
        onPositiveClick() {
            return true
        }
    })
}



export const useOverlay = {
    overlayData,
    showSchedule,
    handleOverlaySchedule,

    showOverlay,
    handleOverlay,
    overlayColumns,
    generateOverlayData,
    showOverlayPreview,
    handleOverlayPreview,
    overviewList,

    handleOverlayEdit,
    showOverlayEdit,
    handleOverlayDelete,
}
